<template>
    <div class='makeups'>
        <div class="makeupsNav">
            <div class='rightNav font42'>
                <div v-for="item,index in navArr" :class="index==activeNavIndex?'active':''"
                     @click="updataList(index,item.type)">{{ item.title }}
                </div>
            </div>
            <div class="chooseBtns font30" v-if="isShowBtns">
                <router-link to="/details/99">
                    <div class="chooseBtn details"></div>
                </router-link>
                <h4>商品详情</h4>
                <router-link to="/camera">
                    <div class="chooseBtn camera"></div>
                </router-link>
                <h4>拍照</h4>
            </div>
            <div class="bottomNav">
                <div class="weight  font24">
                    <button class="clearBtn">一键还原</button>
                    <span>上妆浓度</span>
                    <input type="range" id="range" max="100" min="0" value="50" @change="changeWeight()">
                </div>
                <ul class="bottomList">
                    <li @click='showBtns()'>
                        <div class="goodImg">
                        </div>
                        <div class="goodTitle font30">
                            原装
                        </div>
                    </li>
                    <li @click='showBtns()' v-for="item,index in curItems">
                        <div class="goodImg">
                            <img :src="item.tmpl_img" alt="">
                        </div>
                        <div class="goodTitle font30">
                            {{ item.tmpl_title }}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class='photosArea' v-if='hasPhoto'>
            <ul class="photoItems">
                <li v-for="item,index in photoArr" class="photoItem">
                    <div class="photo"><img :src="item" alt=""></div>
                    <div @click="deleteItem(index)" class="delete">×</div>
                    <div class="clear"></div>
                </li>
            </ul>
            <div @click="deleteAll()" class="deleteAll font30">全部删除</div>
            <div class='coverDel1' v-if="isShowCover&&isFirstDelete">
                <div class="cue font42">
                    <p>删除照片后，魔镜将不会保留您任何信息</p>
                    <div class="okBtn" @click="closeCover()">
                        好的
                    </div>
                </div>
            </div>
        </div>
        <div id="J_openMagicMirror" style='margin:auto;width:5rem;background:rgba(255,255,255,0.8);color:red'
             @click="openMagicMirror()" class="content">打开魔镜
        </div>
        <br>
        <div id="J_openMagicMirror" style='margin:auto;width:5rem;background:rgba(255,255,255,0.8);color:red'
             @click="makeup()" class="content">试妆
        </div>
        <br>
        <div id="J_openMagicMirror" style='margin:auto;width:5rem;background:rgba(255,255,255,0.8);color:red'
             @click="takePhoto()" class="content">拍照
        </div>
        <div class="image_content content" id="J_image"
             style='margin:1rem auto;width:8rem;height: 4.5rem;background:rgba(255,255,255,0.8);overflow: hidden'><img
                id="aImage"/></div>
        <canvas id="canvasAfter"></canvas>
        <canvas id="canvasBefore"></canvas>
        <div id="code"></div>
    </div>
</template>
<script>
    import {fetchData} from '../common/js/ajax.js'
    import {fetchCode} from '../common/js/ajax.js'
    export default
    {
        props: {},
        data() {
            return {
                photoArr: [],
                hasPhoto: false,
                isShowCover: false,
                isFirstDelete: true,
                isdeleteAll: false,
                isShowBtns: false,
                delPhotoIndex: '',
                imgSrc: '',//拍照的照片生成的src
                navArr: [],
                activeNavIndex: 0,
                curItems: [],
            }
        },
        beforeCreate() {
        },
        created() {
        },
        beforeMount() {
        },
        mounted() {
//            this.photoTrim();
            this.init();
            console.log(this.navArr);
        },
        beforeDestroy() {
        },
        destroyed() {
        },
        methods: {
            init: function () {
                var _that = this;
//              获得所有试妆的数据
                fetchData(mac.getMakeupFront, '', function (msg) {
                    msg = msg.data.list;
                    _that.$root.makeupItemsArr = msg;
//                    给所有试妆的数据分类
                    var strArr='';
                    for(let i=0;i<_that.$root.makeupItemsArr.length;i++){
                        var temp = _that.$root.makeupItemsArr[i];;
                        if(strArr.indexOf('@'+temp.type+'@')<0){
                            _that.navArr.push(temp);
                            strArr += '@'+temp.type+'@';
                        }
                    }
                    console.log( _that.navArr);
                })
            },
//            点击右侧分类改变下面试妆产品列表
            updataList: function (index, type) {
                this.activeNavIndex = index;
                this.curItems = [];
                var _that = this;
                $(this.$root.makeupItemsArr).each(function (key, item) {
                    if (item.type == type) {
                        _that.curItems.push(item);
                    }
                });
            }

            ,
//            图片裁剪
            photoTrim: function () {
//                展示在页面上的canvas
                var _that=this;
                var clientWidth = document.documentElement.clientWidth;
                var clientHeight = document.documentElement.clientHeight;
                var canvas1 = document.getElementById("canvasBefore");
                var canvas2 = document.getElementById("canvasAfter");
                canvas2.width = clientWidth / 4;
                canvas2.height = clientHeight * 5 / 9;
//              定义一个canvas放置图片

                canvas1.width = clientWidth;
                canvas1.height = clientHeight;
                var cxt1 = canvas1.getContext("2d");
                var cxt2 = canvas2.getContext("2d");
                var img = new Image();
                img.src = this.imgSrc;
                var canvas3 = document.createElement("canvas");
                var cxt3 = canvas3.getContext("2d");
                canvas3.width=canvas2.width;
                canvas3.height=canvas2.height;
                img.onload = function () {
                    cxt1.drawImage(img, 0, 0, canvas1.width, canvas1.height);
                    var offW = canvas1.width / 2 - canvas2.width / 2;
                    var offH = canvas1.height / 2 - canvas2.height / 2;
                    var dataImg = cxt1.getImageData(offW, offH, canvas2.width, canvas2.height);
                    cxt3.putImageData(dataImg, 0, 0, 0, 0, canvas2.width, canvas2.height);
                    var img3Src = canvas3.toDataURL('image/jpeg');
                    var img2 = new Image();
                    img2.src = img3Src;
                    img2.onload = function () {
                        cxt2.drawImage(img2, 0, 0, canvas2.width, canvas2.height);
                        fetchCode(mac.upPhoto,img3Src,function (msg) {
//                            alert(img3Src);
                           var linkURL=msg.data;
                           var check="http://vrbuy.file.alimmdn.com/MAC/index.html?t=1493286219782&imgurl="+encodeURIComponent(linkURL);
                           alert(check);
                            $("#code").qrcode({
                                render: "canvas", //table方式
                                width : 100,     //设置宽度
                                height: 100,     //设置高度
                                text: check //任意内容
                            });
//                            new QRCode(document.getElementById("code"),linkURL);
                        });
                        _that.photoArr.push(img3Src);
                        _that.hasPhoto=true;
                    }
                };
            }
            ,
            openMagicMirror: function () {
                $('body').css('background-color', 'transparent');
                var MAPP = window.plugin.default;
//                var openMMNode = document.getElementById("J_openMagicMirror");
                MAPP.business.magicMirrorOpen(function (e) {
                    // alert(1);
                    alert('success' + JSON.stringify(e));
                }, function (e) {
                    // alert(2);
                    alert('failure' + JSON.stringify(e));
                });
            }
            ,
            makeup: function () {
                var MAPP = window.plugin.default;
                var params = {
                    makeUpList: [{
                        cspuid: 1,
                        weight: 0.5,
                        attrs: {
                            color: '#000000'
                        }
                    }, {
                        cspuid: 14,
                        weight: 0.5
                    }, {
                        cspuid: 18,
                        weight: 0.5
                    }]
                };
                MAPP.business.magicMirrorMakeUp(params, function (e) {
                    alert('success' + JSON.stringify(e));
                }, function (e) {
                    alert('failure' + JSON.stringify(e));
                });
            }
            ,
            takePhoto: function () {
                var _that = this;
                // var imageNode = document.getElementById("J_image");
                var oImg = document.getElementById('aImage');
                var MAPP = window.plugin.default;
                MAPP.business.magicMirrorTakePhoto(function (e) {
                    // imageNode.innerHTML='<img class="image" src="data:image/jpg;base64,'+e.src+'"></img>'
                    _that.imgSrc = "data:image/jpeg;base64," + e.src;
                    oImg.src = "data:image/jpeg;base64," + e.src;
                    _that.photoTrim();

                }, function (e) {
                    alert('failure' + '拍照失败');
                });
            }
            ,
            showBtns: function () {
                this.isShowBtns = !this.isShowBtns;
                console.log(1);
            }
            ,
            // 改变试妆浓度
            changeWeight: function () {
                var weightValue = $('#range').val();
                console.log(weightValue);
                var bgsValue = weightValue + '% 100%';
                $('#range').css('background-size', bgsValue);
                $('#range').css('-webkit-background-size', bgsValue);
                console.log($('#range').css('background-size'));
            }
            ,
            //删除单张照片
            deleteItem: function (index) {
                this.isShowCover = true;
                if (!this.isFirstDelete) {
                    this.photoArr.splice(index, 1);
                    if (this.photoArr.length == 0) {
                        this.hasPhoto == false;
                    }
                }
                this.delPhotoIndex = index;
            }
            ,
            // 删除全部照片
            deleteAll: function () {
                this.isShowCover = true;
                this.isdeleteAll = true;
                if (!this.isFirstDelete) {
                    this.photoArr = [];
                }
                if (this.photoArr.length == 0) {
                    this.hasPhoto = false;
                }
            }
            ,
            // 关闭确认第一次的弹窗
            closeCover: function () {
                this.isFirstDelete = false;
                this.isShowCover = false;
                if (this.delPhotoIndex) {
                    this.photoArr.splice(this.delPhotoIndex, 1);
                    if (this.photoArr.length == 0) {
                        this.hasPhoto == false;
                    }
                }
                if (this.isdeleteAll) {
                    if (confirm("确定要删除所有照片吗")) {
                        this.photoArr = [];
                        this.hasPhoto == false;
                    }
                }
            }
        },
        components: {
            /*		makeupsNav,
             photosArea,*/
        }
    }
</script>
<style scoped>
    .makeups {
        width: 31rem;
        height: 100%;
        position: relative;
    }

    #canvasBefore {
        visibility: hidden;
        position: fixed;
        left: 0;
        top: 0;
        pointer-events: none;

    }

    #canvasAfter {
        margin: 0 auto;
        position: fixed;
        /*background-color: red ;*/
        left: 6rem;
        top: 2rem;
        pointer-events: none;
    }

    #app {
        background-color: rgba(0, 0, 0, 0);
    }

    body {
        background-color: rgba(0, 0, 0, 0);
    }

    #J_image img {
        width: 100%;
        height: auto;
    }
    #code{
        position: absolute;
        top:0;
        right: 4rem;
        height: 2rem;
        width: 2rem;
    }
    .rightNav {
        position: absolute;
        right: 0;
        width: 3.88rem;
        top: 0.36rem;
    }

    .rightNav div {
        border: 0.05rem solid white;
        border-right: none;
        border-radius: 0.15rem 0 0 0.15rem;
        height: 1.7rem;
        margin-bottom: 0.53rem;
        line-height: 1.7rem;
        text-align: center;
        width: 3.78rem;;
    }

    .bottomNav {
        width: 24rem;
        position: absolute;
        bottom: 0.8rem;
        left: 2.9rem;
        /*background-color: red;*/
    }

    /*导航选中*/
    .rightNav .active {
        background: white !important;
        color: black !important;
    }

    .weight {
        height: 0.66rem;
        margin-bottom: 0.49rem;
        /*background-color: red;*/
        position: relative;
    }

    .goodImg img {
        width: 100%;
        height: 100%;
    }

    .weight span {
        line-height: 0.62rem;
        margin: 0 0.37rem 0 2.06rem;
    }

    /*试妆浓度条*/
    input[type="range"] {
        appearance: none;
        -webkit-appearance: none; /*清除系统默认样式*/
        width: 18.25rem;
        background: -webkit-linear-gradient(#fff, #fff) no-repeat, red; /*设置左边颜色为#61bd12，右边颜色为#ddd*/
        background: linear-gradient(#fff, #fff) no-repeat, red;
        background-size: 50% 100%; /*设置左右宽度比例*/
        -webkit-background-size: 50% 100%; /*设置左右宽度比例*/
        height: 0.08rem; /*横条的高度*/
    }

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none; /*清除系统默认样式*/
        height: 0.6rem; /*拖动块高度*/
        width: 0.6rem; /*拖动块宽度*/
        background: black; /*拖动块背景*/
        border-radius: 50%; /*外观设置为圆形*/
        border: 0.08rem solid #fff; /*设置边框*/
    }

    .clearBtn {
        color: white;
        background-color: rgba(0, 0, 0, 0);
        height: 0.6rem;
        width: 1.85rem;
        border: 0.03rem solid white;
        line-height: 0.6rem;
        vertical-align: top;
    }

    .bottomList {
        background: rgba(0, 0, 0, 0.64);
        border-radius: 0.05rem;
        height: 2.6rem;
        padding: 0 0.6rem;
        overflow-x: scroll;
    }

    .bottomList li {
        width: 3.4rem;
        float: left;
        height: 2.6rem;
    }

    .goodImg {
        background: #d8d8d8;
        border: 0.04rem solid #ffffff;
        width: 1.4rem;
        height: 1.4rem;
        margin: 0.36rem 0.96rem 0.2rem;
    }

    .goodTitle {
        text-align: center;
    }

    .chooseBtns {
        width: 1.3rem;
        position: absolute;
        top: 0.5rem;
        right: 5.03rem;
        /*background-color: red;*/
        text-align: center;
    }

    .chooseBtn {
        border: 0.04rem solid #ffffff;
        width: 1.22rem;
        height: 1.22rem;
        border-radius: 50%;
        margin: 0.25rem 0 0.22rem;
    }

    .chooseBtns h4 {
        margin-bottom: 1.07rem;
    }

    .photosArea {
        position: absolute;
        top: 0.36rem;
        width: 2.62rem;
        max-height: 10rem;
    }

    .photoItems {
        overflow: scroll;
        max-height: 8rem;
        margin-bottom: 0.5rem;
    }

    .photoItem {
        margin-bottom: 0.4rem;
    }

    .photo {
        width: 1.6rem;
        height: 1.9rem;
        background-color: red;
        float: left;
    }
    .photo img{
        width: 100%;
        height: 100%;
    }
    .deleteAll {
        border: 0.03rem solid #ffffff;
        width: 1.54rem;;
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
    }

    .delete {
        width: 0.54rem;
        height: 0.54rem;
        font-size: 0.42rem;
        float: left;
        margin: 0.68rem 0.14rem;
        cursor: pointer;
    }

    .coverDel1 {
        position: fixed;
        top: 0;
        left: 0;
        width: 32rem;
        height: 18rem;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }

    .cue {
        width: 10rem;
        height: 6.4rem;
        margin: 5.8rem 11rem;
        background-color: white;
        position: relative;
    }

    .cue p {
        position: absolute;
        top: 2.44rem;
        left: 1.08rem;
        color: black;
    }

    .cue .okBtn {
        background: #000000;
        width: 4rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        position: absolute;
        left: 3rem;
        top: 3.9rem;
    }
</style>